<template>
  <div>
    <DetailBook
      :book="book"

    />

    <DetailStat
      :readers="book.readers"
      :readerNum="book.readerNum"
      :rankNum="book.rankNum"
      :rankAvg="book.rankAvg"
    />

    <DetailRate
      :rateValue="rateValue"
      @onRateChange="onRateChange"
    />

    <DetailContents
      :contents="contents"
      @readBook="readBook"
    />

    <DetailBottom
      :isInShelf="isInShelf"
      @handleShelf="handleShelf"
      @readBook="readBook"
    />
  </div>
</template>

<script>
  import DetailBook from "../../components/detail/DetailBook.vue";
  import DetailRate from "../../components/detail/DetailRate.vue";
  import DetailStat from "../../components/detail/DetailStat.vue";
  import DetailContents from "../../components/detail/DetailContents.vue";
  import DetailBottom from "../../components/detail/DetailBottom.vue";
  import { bookDetail, rank, bookContents, bookShelfState, joinShelf, removeShelf } from "../../api";
  import { showToast, showModal } from "../../api/wechat";

  export default {
    name: "detail",
    data() {
      return {
        book: {},
        rateValue: 0,
        contents: [],
        isInShelf: false,
      };
    },
    components: {
      DetailBook,
      DetailRate,
      DetailStat,
      DetailContents,
      DetailBottom
    },
    mounted() {
      this.getBookDetail();
      this.getBookContents();
      this.getBookShelfState();
    },
    methods: {
      handleShelf() {
        const { fileName } = this.$route.query;
        const openId = mpvue.getStorageSync("openId");
        if (!this.isInShelf) {
          joinShelf({
            fileName,
            openId
          }).then(response => {
            this.getBookShelfState();
            showToast("加入书架成功");
          });
        } else {
          showModal(`确定将"${this.book.title}"移出书架?`, () => {
            removeShelf({
              fileName,
              openId,
            }).then(response => {
              this.getBookShelfState();
            });
          });
        }
      },
      getBookShelfState() {
        const openId = mpvue.getStorageSync("openId");
        const { fileName } = this.$route.query;
        if (openId && fileName) {
          bookShelfState({
            openId,
            fileName
          }).then(response => {
            const { data } = response.data;
            this.isInShelf = data.length !== 0;
          });
        }
      },
      readBook(href) {
        if(href){
          var index = href.indexOf('/');
        }
        this.$router.push({
          path : '/pages/read/main',
          query : {
            navigation : (href && href.slice(index+1)) || '',
            fileName : this.book.fileName,
            opf : this.book.opf,
          }
        })
      },
      getBookContents() {
        const { fileName } = this.$route.query;
        bookContents({
          fileName
        }).then(response => {
          this.contents = response.data.data;
        });
      },
      getBookDetail() {
        const openId = mpvue.getStorageSync("openId");
        const { fileName } = this.$route.query;
        if (openId && fileName) {
          bookDetail({
            openId,
            fileName
          }).then(response => {
            this.book = response.data.data;
          });
        }
      },
      onRateChange(value) {
        const openId = mpvue.getStorageSync("openId");
        const { fileName } = this.$route.query;
        rank({
          openId,
          fileName,
          rank: value
        }).then(response => {
          this.getBookDetail();
        });
      }
    }
  };
</script>

<style lang="less" scoped>

</style>
